<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name">{{name}}
        <!-- 使用 v-model 双向绑定 -->
        双向数据绑定：<input type="text" v-model:value="name">{{name}}

        <br>
        <!-- 写法2 -->
        单向数据绑定2：<input type="text" :value="name">{{name}}
        双向数据绑定2：<input type="text" v-model="name">{{name}}

    </div>


    <script type="text/javascript">
        // 阻止vue启动时候生成生产提示
        Vue.config.productionTip = false

        // 创建vue实例
        const x = new Vue({
            el: "#root",  // 用于指定vue实例为哪个容器服务，值通常是css选择器字符串，那这个就当成id选择器
            data() {
                return {    // 这种是data的函数式写法，也可以使用对象式写法（不用return），但是写组件时候，必须使用函数式
                    name: "aBiu"
                }
            },
        })
    </script>
</body>

</html>